<template>
  <div style="padding:20px"
       ref="bigbox">
    <div class="storeinfo">
      <img :src="storeinfo.img"
           class="logo">
      <div class="info">
        <p class="name">{{storeinfo.name}}</p>
        <p class="score">5.0</p>
        <div class="stars">
          <span>商家评分</span>
          <img src="../../assets/img/star.png"
               class="icon"
               v-for="item in 5"
               :key="item">
        </div>
      </div>
    </div>
    <div class="main">
      <div class="title">
        <span>评论详情（{{total}}条）</span>
        <div class="search">
          <el-select v-model="value"
                     filterable
                     placeholder="请选择商品进行筛选"
                     clearable>
            <el-option v-for="item in comList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary"
                     style="margin-left:15px"
                     size="medium"
                     @click="choCom">查询</el-button>
          <!-- <el-date-picker v-model="choDate"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker> -->
        </div>

      </div>
      <div class="msgSec">
        <!-- <div class="nav">
          <span :class="msgact==0?'span-act':''">全部</span>
          <span :class="msgact==1?'span-act':''">有图片</span>
        </div> -->
        <div class="none"
             v-if="msglist.length<=0">暂无评价</div>
        <div class="msgbox"
             v-for="(item,index) in msglist"
             :key="item.id">
          <img :src="item.avator"
               class="head">
          <div class="right">
            <p class="name">{{item.userName}}</p>
            <p class="time">{{item.createAt}}</p>
            <el-image style="width: 100px; height: 100px;margin-right:10px"
                      v-for="it in item.imgurlList"
                      :key="it"
                      :src="it"
                      @click="clickimg(index)"
                      :preview-src-list="srcList">
            </el-image>
            <div class="cont">
              <span class="con">{{item.content}}</span>
              <div class="cominfo">
                <el-image style="width: 60px; height: 60px;margin-right:10px"
                          :src="item.goodsImg">
                </el-image>
                <div class="name">
                  <p>{{item.goodsName}}</p>
                  <p>{{item.spec}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination background
                         @current-change="changePage"
                         :current-page.sync="page"
                         :page-size="pageSize"
                         layout="total,prev,pager,next,jumper"
                         :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      choDate: "",
      msgact: 0,
      srcList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      comList: [],
      value: '', // 选择的商品id
      msglist: [],
      storeinfo: {} // 店铺信息
    }
  },
  mounted () {
    this.getcomlist();
    this.getmsglist();
    this.getstoreinfo();
  },
  methods: {
    // 获取店铺信息
    getstoreinfo () {
      this.$getRequest("/shop/shop/" + sessionStorage.getItem("shopId"), {}).then(res => {
        this.storeinfo = res.data.shopShop;
      })
    },
    // 获取全部商品
    getcomlist () {
      this.$postRequest("/mall/goodsGoods/queryList", {
        shopId: sessionStorage.getItem("shopId")
      }).then(res => {
        this.comList = res.data;
      })
    },
    // 获取评价列表
    getmsglist () {
      this.$postRequest("/mall/orderComent/list", {
        shopId: sessionStorage.getItem("shopId"),
        orderId: "",
        pageNum: this.page,
        pageSize: this.pageSize,
        goodsId: this.value,
        userName: ""
      }).then(res => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].createAt = this.$util.gettime(new Date(res.rows[i].createAt));
          if (res.rows[i].imgurls == "") {
            res.rows[i].imgurlList = [];
          } else {
            res.rows[i].imgurlList = res.rows[i].imgurls.split(",");
          }
        }
        this.msglist = res.rows;
      })
    },
    clickimg (index) {
      this.srcList = this.msglist[index].imgurlList;
    },
    // 选择商品
    choCom () {
      this.getmsglist();
    },
    changePage (e) {
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
      this.getmsglist();
    }
  }
}
</script>

<style lang="scss" scoped>
.none {
  line-height: 80px;
  text-align: center;
  font-size: 12px;
}
.storeinfo {
  padding: 30px;
  background: #fff;
  display: flex;
  align-items: center;
  > .logo {
    width: 120px;
    height: 120px;
  }
  .info {
    margin-left: 30px;
    .name {
      font-size: 22px;
      font-weight: bold;
    }
    .score {
      font-size: 40px;
      color: #ff8812;
    }
    .stars {
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
      }
      img {
        height: 25px;
        width: 25px;
        margin-left: 10px;
      }
    }
  }
}
.main {
  background: #fff;
  margin: 20px 0;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    > span {
      font-size: 14px;
    }
  }
  .msgSec {
    padding: 20px 30px;
    .nav {
      margin-bottom: 20px;
      span {
        display: inline-block;
        margin-right: 20px;
        width: 80px;
        height: 30px;
        background: rgba(26, 105, 224, 0.05);
        border: 1px solid #1a69e0;
        line-height: 30px;
        text-align: center;
        color: #1a69e0;
        font-size: 16px;
        cursor: pointer;
        transition: 0.2s;
      }
      .span-act {
        background: #1a69e0;
        color: #fff;
      }
      span:hover {
        background: #1a69e0;
        color: #fff;
      }
    }
    .msgbox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .head {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .right {
        width: calc(100% - 60px);
        .name {
          font-size: 16px;
        }
        .time {
          color: #808080;
          font-size: 14px;
          margin: 10px 0 10px 0;
        }
        .cont {
          background: #f9f9f9;
          padding: 10px 20px;
          margin-top: 10px;
          .con {
            font-size: 14px;
          }
          .cominfo {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #eee;
            display: flex;
            align-items: center;
            .name {
              font-size: 12px;
              color: #808080;
            }
          }
        }
      }
    }
  }
  .page {
    text-align: right;
  }
}
</style>